<template>
  <div class="register">
    <Header></Header>
    <!-- 中部 -->
    <div class="center">
      <img class="logo_left" src="..\assets\Images\login\logo_left.jpg" />
      <!-- 中部输入框 -->
      <div class="login_input">
        <div>
          <router-link to="/login" active-class="active" class="header_text">登录</router-link>
          <router-link to="/register" active-class="active" class="header_text">注册</router-link>
        </div>
        <!-- 注册 -->
        <el-form :model="register" ref="register" :rules="rules" class="test">
          <el-form-item prop="rankNumber">
            <el-input v-model="register.rankNumber" clearable class="input_style2" placeholder="请输入身份证号"></el-input>
          </el-form-item>
          <el-form-item prop="userName">
            <el-input v-model="register.userName" clearable placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item prop="userId">
            <el-input v-model="register.userId" clearable placeholder="请输入电话" type="tel"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="register.password" clearable placeholder="请输入密码" type="password"></el-input>
          </el-form-item>
          <el-form-item prop="password2">
            <el-input v-model="register.password2" clearable placeholder="请确认密码" type="password"></el-input>
          </el-form-item>
          <el-form-item prop="sex">
            <el-select v-model="register.sex" placeholder="请选择性别">
              <el-option label="男" value="0"></el-option>
              <el-option label="女" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button :plain="true" type="primary" class="register_btn" @click="resetForm('register')">重 置</el-button>
            <el-button :plain="true" type="primary" class="register_btn" @click="submitForm('register')">注 册</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import Header from '../common/header.vue'
// 身份校验
// import { isIdentityId } from '../assets/Js/validate'
export default {
  name: 'Register',
  components: {
    Header: Header
  },
  data () {
    // 电话号码校验
    var validatePass3 = (rule, value, callback) => {
      if (value && (!(/^[1][345789]\d{9}$/).test(value) || !(/^[1-9]\d*$/).test(value) || value.length !== 11)) {
        callback(new Error('手机号码不符合规范'))
      } else {
        callback()
      }
    }
    // 密码校验
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.register.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    // 身份证号校验
    var checkIdNum = (rule, value, callback) => {
      const reg = /(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)/
      if (!value) {
        return callback(new Error('身份证号不能为空！'))
      } else if (!reg.test(value)) {
        return callback(new Error('身份证号格式不正确！'))
      } else {
        callback()
      }
    }
    return {
      register: {
        rankNumber: '',
        userName: '',
        userId: '',
        password: '',
        password2: '',
        sex: ''
      },
      // 规则
      rules: {
        rankNumber: [
          { required: true, message: '请输入身份证号', trigger: 'blur' },
          { validator: checkIdNum, trigger: 'blur' }
        ],
        userName: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { max: 12, min: 2, message: '长度为2到12位', trigger: 'blur' }
        ],
        userId: [
          { required: true, message: '请输入电话号码', trigger: 'blur' },
          { validator: validatePass3, trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },

          { max: 12, min: 6, message: '长度为6到12位', trigger: 'blur' }
        ],
        password2: [
          { validator: validatePass2, trigger: 'blur' }
        ],
        sex: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    submitForm (register) {
      this.$refs[register].validate((valid) => {
        if (valid) {
          let param = {
            idNumber: this.register.rankNumber,
            username: this.register.userName,
            telephone: this.register.userId,
            password: this.register.password,
            gender: this.register.sex
          }
          this.$axios({
            url: 'user/register',
            method: 'post',
            data: param
          }).then(res => {
            console.log(res.data)
            if (res.data.code === 200) {
              this.$message.success('注册成功！')
              this.$router.push('/login')
            } else if (res.data.code === 500) {
              this.$message.error('用户已存在！')
              this.$router.push('/register')
            }
          })
            .catch((err) => {
              console.log(err)
            })
        }
      })
    },
    // 重置校验
    resetForm (register) {
      this.$refs[register].resetFields()
    }
  }
}
</script>

<style scoped>
.active {
  border-bottom: 2px solid #4c61a0;
}

/* 整个登录页面 */
#login {
  position: absolute;
  z-index: 0;
}

.test {
  margin-top: 40px;
}

/* 中部 */
.center {
  margin: 0 auto;
}

/* 中部左侧图片 */
.logo_left {
  float: left;
  width: 500px;
  height: 400px;
  margin-top: 13%;
  margin-left: 20%;
}

/* 中部整体输入框 */
.login_input {
  display: block;
  float: left;
  margin-top: 10%;
  margin-left: 12%;
  border: 1px solid #4c61a0;
  box-shadow: 15px 10px 10px -10px #4c61a0;
  height: 500px;
  width: 280px;
  padding: 0px 25px;
  border-radius: 22px;
}

/* 注册登录导航 */
.header_text {
  float: left;
  margin-top: 15px;
  margin-left: 60px;
  margin-right: 18px;
  padding: 0 0 10px 0;
  font-size: 16px;
  font-weight: 900;
  text-decoration: none;
}

/* 输入框---注册 */
.input_style2 {
  margin-top: 10px;
}

/*注册的两个按钮样式*/
.register_btn {
  width: 100px;
  height: 35px;
  margin-top: 5px;
  margin-left: 28px;
  border-radius: 1em;
  color: white;
  border-color: transparent;
  background: #4c61a0;
}
</style>
